<template>
  <ul :class="['page-box']">
    <li :class="['btn',
                 'head',
                 current <= 1?'notClick':'',
                 type == 'text'?'btn-text':'',
                 type == 'text' && current <= 1?'notClick-text':''
                ]"
        @click="current <= 1?'':firstPage()"
        v-text="firstPageContext"></li>
    <li :class="['btn',current <= 1?'notClick':'',
                 type == 'text'?'btn-text':'',
                 type == 'text' && current <= 1?'notClick-text':''
                ]"
        @click="current <= 1?'':previousPage()">
      <span v-if="type == 'text'">上一页</span>
      <span v-else>&lt;</span>
    </li>
    <template v-if="pagesContainer.length > 0 && pagesContainer[0] > 1">
      <li :class="['btn',
                   current == 1?'notClick':'',
                   type == 'text'?'btn-text':'',
                   type == 'text' && current == 1?'notClick-text':''
                  ]"
          @click="current == 1?'':toAppointPage(pagesContainer[0])">...</li>
    </template>
    <template v-for="(item,index) in pagesContainer">
      <li :class="['page-item btn',
                   type == 'text'?'btn-text page-item-text':''
                  ]"
          ref="pageItem"
          v-text="item"
          :key="index"
          @click="clickPage(item)"></li>
    </template>
    <template v-if="pagesContainer.length > 0 && pagesContainer[pageSize-1] < totalPage">
      <li :class="['btn',
                   current == totalPage?'notClick':'',
                   type == 'text'?'btn-text':'',
                   type == 'text' && current == totalPage?'notClick-text':''
                  ]"
          @click="current == totalPage?'':toAppointPage(pagesContainer[pageSize-1])">...</li>
    </template>
    <li :class="['btn',
                 current >= totalPage?'notClick':'',
                 type == 'text'?'btn-text':'',
                 type == 'text' && current >= totalPage?'notClick-text':''
                ]"
        @click="current >= totalPage?'':nextPage()">
      <span v-if="type == 'text'">下一页</span>
      <span v-else>&gt;</span>
    </li>
    <li :class="['btn',
                 'foot',
                 current >= totalPage?'notClick':'',
                 type == 'text'?'btn-text':'',
                 type == 'text' && current >= totalPage?'notClick-text':'']"
        @click="current >= totalPage?'':lastPage()" v-text="lastPageContext"></li>
    <li :class="['btn','total',type == 'text'?'btn-text total-text':'']" v-text="total"></li>
  </ul>
</template>

<script>
    export default {
        props: {
            firstPageContext: {
                type: String,
                default: () => "首页"
            },
            lastPageContext: {
                type: String,
                default: () => "尾页"
            },
            currentPage:{
                type: BigInt,
                default: () => null
            },
            totalPage:{
                type: BigInt,
                default: () => null
            },
            pageSize:{
                type: BigInt,
                default: () => 5
            },
            type: {
                type: String,
                default: () => "button" // button & text
            }
        },
        data() {
            return{
                pagesContainer: [],
                current: 1,
                total: "共"+this.totalPage+"页"
            }
        },
        created() {
            this.initPage(this.currentPage)
        },
        mounted() {
            if (this.totalPage < this.pageSize) {
                this.pageSize = this.totalPage
            }
            this.initPage(this.currentPage)
        },
        watch:{
            currentPage() {
                this.initPage(this.currentPage)
            },
            totalPage() {
                if (this.totalPage < this.pageSize) {
                    this.pageSize = this.totalPage
                }
                this.total= "共"+this.totalPage+"页"
                this.initPage(this.currentPage)
            }
        },
        methods:{
            initPage(current) {
                this.current = current
                this.setPageItem(this.current)
            },
            setPageItem(current) {
                this.pagesContainer = []
                if (current - Math.ceil(this.pageSize/2) <= 0) {  // 不居中,左侧显示省略
                    for (let i = 1,index=0; i <= this.pageSize; i++,index++) {
                        this.$set(this.pagesContainer,index,i)
                    }
                }
                else if (current + Math.ceil(this.pageSize/2) >= this.totalPage) {  // 不居中,右侧显示省略
                    for (let i = this.totalPage,index=this.pageSize-1; i >= this.totalPage - this.pageSize;i--,index--) {
                        this.$set(this.pagesContainer,index,i)
                    }
                }
                else {  // 居中
                    for (let i = current,index=this.pageSize-1,aa=Math.ceil(this.pageSize/2) -1; i >= current-this.pageSize-1;i--,index--,aa--) {
                        this.$set(this.pagesContainer,index,current+aa)
                    }
                }
                // 修改样式
                if (this.type == 'button') {
                    for(let i = 0; i < this.pagesContainer.length; i++) {
                        if (this.pagesContainer[i] == current) {
                            this.$refs.pageItem[i].style.backgroundColor = "rgb(16, 26, 36)";
                            continue
                        }
                        this.$refs.pageItem[i].style.backgroundColor = "rgb(28, 36, 48)";
                    }
                } else {
                    for(let i = 0; i < this.pagesContainer.length; i++) {
                        if (this.pagesContainer[i] == current) {
                            this.$refs.pageItem[i].style.color = "rgba(255, 255, 255, 1)";
                            continue
                        }
                        this.$refs.pageItem[i].style.color = "rgba(255, 255, 255, 0.5)";
                    }
                }
            },
            clickPage(item) {
                this.current = item
                this.initPage(this.current)
                this.$emit("current-page",this.current)
            },
            previousPage() {
                if (this.current != 1) {
                    this.$emit("current-page",--this.current)
                    this.initPage(this.current)
                }
            },
            nextPage() {
                if (this.current != this.totalPage) {
                    this.$emit("current-page",++this.current)
                    this.initPage(this.current)
                }
            },
            firstPage() {
                if (this.current != 1) {
                    this.current = 1
                    this.$emit("current-page",this.current)
                    this.initPage(this.current)
                }
            },
            lastPage() {
                if (this.current != this.totalPage) {
                    this.current = this.totalPage
                    this.$emit("current-page",this.current)
                    this.initPage(this.current)
                }
            },
            toAppointPage(page) {
                this.current = page
                this.$emit("current-page",this.current)
                this.initPage(this.current)
            }
        }
    }
</script>

<style scoped>
  ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .page-box {
    height: 35px;
    line-height: 35px;
  }
  .btn {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    min-width: 30px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-right: 2px;
    padding: 1px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgb(28, 36, 48);
    color: rgba(255, 255, 255, 0.5);
    transition: 0.1s;
  }
  .btn-text{
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(28, 36, 48,0);
  }
  .btn:hover {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgb(16, 26, 36);
  }
  .btn-text:hover {
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(16, 26, 36,0);
  }
  .page-item:hover {
    background-color: rgb(16, 26, 36) !important;
  }
  .page-item-text:hover {
    background-color: rgba(16, 26, 36,0) !important;
  }
  .head,.foot {
    min-width: 40px;
  }
  .notClick:hover {
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgb(28, 36, 48);
  }
  .notClick-text:hover {
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(28, 36, 48,0);
  }
  .total{
    cursor: default;
    min-width: 50px;
  }
  .total:hover{
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgb(28, 36, 48);
  }
  .total-text:hover{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(28, 36, 48,0);
  }
</style>
